<template>
    <NFlex justify="flex-end">
        <NButton type="primary" size="small" @click="showCreate">创建广告</NButton>
    </NFlex>

    <NDataTable class="mt-4" :columns="columns" :data="list" :loading="loading"></NDataTable>

    <NFlex justify="flex-end" class="mt-4">
        <NPagination
            v-model:page="pager.pageIndex"
            v-model:page-size="pager.pageSize"
            :item-count="total"
            show-size-picker
            :page-sizes="[10, 20, 50, 100]"
        />
    </NFlex>

    <Create v-model="createVisible" :id="id" @refresh="queryData" />
</template>

<script setup lang="tsx">
import { ref, reactive, watch } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { NTag, NFlex, NButton, NPopconfirm, useMessage, type DataTableColumns } from 'naive-ui'
import { AdType } from '@/constants/content'
import { queryAdList, delAd } from '@/api/content'
import Create from './Create.vue'

const router = useRouter()
function goMessageType() {
    router.push('/content/messageType')
}
const message = useMessage()
const columns: DataTableColumns<Api.Content.Ad> = [
    {
        title: '广告类型',
        key: 'type',
        render: row => AdType[row.type]
    },

    {
        title: '广告名称',
        key: 'title'
    },

    {
        title: '状态',
        key: 'status',
        render: row => (row.status === 1 ? <NTag type="success">已开启</NTag> : <NTag>已关闭</NTag>)
    },

    {
        title: '发布时间',
        key: 'createdAt',
        render: row => dayjs(row.createdAt * 1000).format('YYYY-MM-DD')
    },

    {
        title: '操作',
        key: 'operator',
        render: row => (
            <NFlex>
                <NButton size="small" onClick={() => edit(row)}>
                    编辑
                </NButton>
                <NPopconfirm onPositiveClick={() => del(row.id)}>
                    {{
                        default: () => '确定要删除吗？',
                        trigger: () => [
                            <NButton size="small" type="error">
                                删除
                            </NButton>
                        ]
                    }}
                </NPopconfirm>
            </NFlex>
        )
    }
]

const list = ref<Api.Content.Ad[]>([])
const total = ref(0)
const loading = ref(false)
const pager = reactive({
    pageIndex: 1,
    pageSize: 10
})
const queryData = async () => {
    loading.value = true
    const [err, res] = await queryAdList({
        ...pager
    })
    loading.value = false
    if (!err) {
        const { count, list: dataList } = res
        list.value = dataList
        total.value = count
    }
}
queryData()
watch(pager, queryData)

const createVisible = ref(false)
const showCreate = () => {
    id.value = null
    createVisible.value = true
}

const id = ref<number | null>(null)
function edit(row: Api.Content.Ad) {
    id.value = row.id
    createVisible.value = true
}

async function del(id: Api.Content.Ad['id']) {
    const [err, res] = await delAd(id)
    if (!err && res) {
        message.success('操作成功')
        queryData()
    }
}
</script>
